<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <h3>学科:</h3>
            <div style="width: 10px;"></div>
            <el-select v-model="formInline.gradeLevel" style="width: 200px" clearable>
                <el-option v-for="item in LevelStore.list" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <br>

        <el-form-item>
            <h3>试卷:</h3>
            <el-table :data="formInline.paperItems" border style="width: 100%">
                <el-table-column prop="name" label="学科" width="180" />
                <el-table-column prop="questionCount" label="题目数量" />
                <el-table-column prop="score" label="试卷分数" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column fixed="right" label="操作">
                    <template #default>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
  
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onSubmit">添加</el-button>
            <el-button type="success" @click="onSubmit">添加试卷</el-button>
        </el-form-item>
    </el-form>

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { useLevelStore } from '@/stores/level'
import { Search } from '@element-plus/icons-vue'
import { taskSelect, type TaskDetail, type PaperItem } from '@/api/renwu'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const LevelStore = useLevelStore()
const route = useRoute()

// 定义表单数据接口
interface FormInlineType {
    user: string;
    region: string;
    date: string;
    gradeLevel: number | null;
    title: string;
    paperItems: PaperItem[]; // 明确指定paperItems类型为PaperItem数组
}

// 使用接口类型定义formInline
const formInline = reactive<FormInlineType>({
    user: '',
    region: '',
    date: '',
    gradeLevel: null,
    title: '',
    paperItems: [] // 初始化为空数组，但类型为PaperItem[]
})

const onSubmit = () => {
    console.log('submit!')
}

const input1 = ref('')
const value = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
]

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

const handleClick = () => {
    console.log('click')
}

// 根据路由ID获取任务详情
const fetchTaskData = async () => {
    const taskId = route.query.taskId
    if (taskId && typeof taskId === 'string') {
        try {
            const res = await taskSelect(parseInt(taskId))
            if (res.code === 1 && res.response) {
                formInline.gradeLevel = res.response.gradeLevel
                formInline.title = res.response.title
                formInline.paperItems = res.response.paperItems // 类型匹配，不再报错
            } else {
                ElMessage.error(res.message || '获取任务信息失败')
            }
        } catch (error) {
            console.error('获取任务信息时出错:', error)
            ElMessage.error('获取任务信息失败，请稍后重试')
        }
    }
}

onMounted(() => {
    fetchTaskData()
})
</script>